
/*
  应用展示搜索详细页面
 */
<template>
  <div class="app-container">
    <el-row class="wrapper page">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>应用查询
          </p>

          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
               <el-button type="primary" @click="setUp" icon="el-icon-plus" size="small">创建应用</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" plain icon="el-icon-refresh" @click="queryApp" size="small">刷新</el-button>
            </el-form-item>
            <!-- 状态选择.start -->
            <!-- <el-button-group style="margin-right:10px;">
              <el-button size="medium" @click="handleQueryStatus('all')">全部</el-button>
              <el-button size="medium" @click="handleQueryStatus('running')">运行中</el-button>
              <el-button size="medium" @click="handleQueryStatus('close')">已关闭</el-button>
              <el-button size="medium" @click="handleQueryStatus('error')">异常</el-button>
            </el-button-group> -->

            <el-radio-group v-model="queryStatusRadio" @change="handleQueryStatus"  size="small"  style="margin-right:10px;margin-top:4px;">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="运行中"></el-radio-button>
                <el-radio-button label="已关闭"></el-radio-button>
                <el-radio-button label="异常"></el-radio-button>
            </el-radio-group>

            <!-- 状态选择.end -->

            <el-form-item>
              <el-input v-model="listQuery.queryKey" placeholder="按应用名称搜索"  size="small"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" class="iconfont icon-sousuo2"  @click="queryApp"  size="small">搜索</el-button>
            </el-form-item>

			<el-form-item>
				<p>
					<span>共<span>{{queryTotal}}</span>条</span>
				</p>
			</el-form-item>

          </el-form>

          <!--数据列表-->
          <el-table :data="manageData"
		  		v-loading="loadingAppTable"
			  	highlight-current-row
				style="width: 100%;" class="search-list">
            <el-table-column  prop="opration"  width="50">
              <template slot-scope="scope">
                    <el-tooltip class="item" effect="light"  placement="top-start">
                        <div slot="content" v-if="scope.row.status === '运行中'">应用正常运行中</div>
                        <div slot="content" v-else-if="scope.row.status === '异常'">应用异常,一个或多个容器出错,请到管理页面查看详情</div>
                        <div slot="content" v-else-if="scope.row.status === '已关闭'">应用已经关闭,没有实例运行</div>
                        <div slot="content" v-else-if="scope.row.status === '创建中...'"></div>
                        <i class='el-icon-success' style="color: rgb(0, 0, 255); font-size: 20px;" v-if="scope.row.status === '运行中'"></i>
                        <i class='el-icon-error' style="color: rgb(255, 0, 0); font-size: 20px;" v-else-if="scope.row.status === '异常'"></i>
                        <i class='el-icon-remove' style="color: rgb(0, 0, 0); font-size: 20px;" v-else-if="scope.row.status === '已关闭'"></i>
                        <i class='el-icon-loading' style="color: rgb(30, 144, 255); font-size: 20px;" v-else-if="scope.row.status === '创建中...'"></i>
                    </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column  align="left" prop="appName" :show-overflow-tooltip="true" label="应用名" sortable></el-table-column>
            <el-table-column  align="center" prop="imageName" :show-overflow-tooltip="true" label="镜像名称" sortable></el-table-column>
            <el-table-column  align="left" prop="imageVersion" :align="eltablecolumn"  label="镜像版本" sortable></el-table-column>
            <el-table-column  align="center" prop="replicas"  label="实例" sortable></el-table-column>
            <el-table-column  prop="status"  label="状态" sortable></el-table-column>
            <el-table-column  prop="timeDiff"  label="创建时间" sortable></el-table-column>
            <el-table-column  prop="opration"  label="操作"   width="100">
              <template slot-scope="scope">
                <el-button type="primary" plain class="el-icon-setting" @click="manageApp(scope.$index, scope.row)" size="mini">管理</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页.start -->
            <div v-show="showPagination" class="block" style="text-align:right;margin:10px 0;">
              	<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="listQuery.page"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="queryTotal">
				</el-pagination>
            </div>
			<!-- 分页.end -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { appManagement } from '@/utils/appManagement'

export default {
  	data() {
    	return {
            queryStatusRadio: '全部',
			// 分页插件初始化
			// 搜索输入框初始化
			queryTotal: 0,
			// 是否显示分页插件
			showPagination: false,
			listQuery: {
				page: 1,
				pageSize: 10,
				queryKey: '', // 查询关键字
				queryStatus:'all',  // 查询状态,
				namespace: ''
			},

			// app 展示table
			manageData: [],
			// 是否load table
            loadingAppTable: false,
            eltablecolumn: 'center'
    	};
	  },
	created() {
		// 查询
		this.queryApp();
	},
  	methods: {
		// 描述table行的颜色,以显示某种状态
		tableRowClassName(row, rowIndex) {

			const status = row.status;
			if (status == '运行中') {
				return 'running-row';
			} else if (status == '异常') {
				return 'error-row'
			}

			return 'close-row';
		},
		// 创建应用
		setUp() {
			this.$router.push({
				path: "/apply/management/app_create"
			});
		},
	  	// 分页size改变触发事件
		handleSizeChange(val){
			this.listQuery.pageSize = val;
			// 查询
			this.queryApp();
		},
		// 分页页数改变时候触发事件
		handleCurrentChange(val) {
			this.listQuery.page = val;
			// 查询
			this.queryApp();
		},
		// 改变查询状态
		handleQueryStatus(val){
            if (val == '全部') {
                this.listQuery.queryStatus = 'all';
            } else if(val == '运行中') {
                this.listQuery.queryStatus = 'running';
            } else if (val == '已关闭') {
                this.listQuery.queryStatus = 'close';
            } else {
                this.listQuery.queryStatus = 'error';
            }
			// 查询
			this.queryApp();
		},
		// 查询应用
		queryApp() {
			// 获得当前选择的空间名
			const currentNmaespace = this.$store.getters.namespace;
			// 检验
			if (currentNmaespace == '') {
				return false;
			}
			this.listQuery.namespace = currentNmaespace;

			// 加载table
            this.loadingAppTable = true;

			// 查询
			this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_QUERY,this.listQuery).then(res => {
				// 停止加载table
				this.loadingAppTable = false;

				let total = res.data.total;
				let items = res.data.items;
				this.manageData = [];
				this.queryTotal = total;
				this.manageData = items;

				if (this.listQuery.queryStatus == 'all') {
					if (total > this.listQuery.pageSize) {
						// 显示分页插件
						this.showPagination = true;
					} else {
						// 关闭分页插件
						this.showPagination = false;
					}
				}
			}).catch(error => {
                // 停止加载table
				this.loadingAppTable = false;
            });
		},
		// 管理应用
		manageApp: function(index, row) {
			//console.log(index);
            // console.log(row.id);
            // 获得应用ID
            const appId = row.id;
            if (appId == '') {
                this.$notify.error(
				 	'应用ID为空'
				);
                return false;
            }

            // 存储应用ID到浏览器
            appManagement.setAppId(appId);
			// 跳转到管理页面
			this.$router.push({
            	path: '/apply/management/app_manage'
          	});
		}

	},
	computed: {
        getCurrentNamespace() {
            return this.$store.getters.namespace;
        }
    },
    watch: {
        getCurrentNamespace(val) {
            // 当选择选择头部空间下拉框的时候,触发事件
            // console.log('我在服务配置页面,监听空间选择=' + val);
            // 获取配置集
            this.queryApp();
        },

    }
};
</script>
<style>

.el-table .close-row {
    background: #FFFFFF;
}

.el-table .running-row {
    background: #40E0D0;
}

.el-table .error-row {
    background: #FF0000;
}


.page .el-table th > .cell {
	padding:0 18px;
	/*text-align:left;*/
}

.page .selected {
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.page .el-select {
  border: 1px solid #eaeaea;
  border-radius: 2px;
}

.page .el-table__expanded-cell {
  padding: 0;
}

.page .extend .el-table {
  padding-left: 20px;
}

.page .extend {
  border: none;
}
.page .el-table .running-row{
    background:#fff;
}
/*.page .el-table td, .page .el-table th.is-leaf{*/
	/*text-align: left;*/
/*}*/
.page .icon-sousuo2:before{
	padding-right:4px;
}
.page .el-icon-circle-check:before,
.page .el-icon-circle-cross:before,
.page .el-icon-information:before,
.page .el-icon-loading:before{
    color: #888;

}

</style>
